<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Virtual Oasis</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" data-spy="affix" data-offset-top="50">
        <div class="container">
            <div class="navbar-header col-md-3">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="logo" href="#"><img src="img/logo.png">Virtual Oasis</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav pull-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#server">Server Package </a></li>
                    <li><a href="http://virtualoasis.setmore.com" target="_blank">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

<section class="banner">
    <div class="container"></div>
</section>
<section id="about" class="about">
    <div class="container">
        <div class="row">
            <h1 class="title">About US</h1>

            <div class="col-sm-6 col-xs-12 col-sm-offset-1">
                <p class="test">Virtual Oasis is a digital marketing studio specialized in 3D scanning, modeling, and
                    creating superior 360-degree virtual tour (or Virtual Reality) experiences. Utilizing one of the
                    world’s most leading-edge technology – Matterport Pro Immersive Media System – we are able to
                    capture real spaces such as residential & commercial real estates, campuses, hotels; and re-build
                    them into the virtual world. This puts the viewers in an immersive environment where they can
                    actually ‘play around, explore and feel’ the space.
                </p>
                <p class="test">At Virtual Oasis, we understand for a fact that we can only make it a business if we can
                    help you become more successful. Working through this amazing technology, along with our
                    professional attitude and dedication, we are aiming to deliver the best 3D service and customer
                    experience.
                </p>
            </div>
            <div class="col-sm-4 col-xs-12">
                <img src="img/about.jpg"/>
            </div>

        </div>
    </div>
</section>
<section id="portfolio" class="portfolio">
    <div class="container">

        <h1 class="title">Portfolio</h1>
        <div class="row">
            <div class="col-sm-4">
                <div class="portfolio-box">
                    <iframe style="width: 100%;height: 220px" src="https://my.matterport.com/show/?m=aSx1MpRRqif" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="portfolio-box">
                    <iframe style="width: 100%;height: 220px" src="https://my.matterport.com/show/?m=aSx1MpRRqif" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="portfolio-box">
                    <iframe style="width: 100%;height: 220px" src="https://my.matterport.com/show/?m=aSx1MpRRqif" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <!--<div class="col-sm-3">-->
                <!--<div class="portfolio-box">-->
                    <!--<img src="img/product_2.jpg"/>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="col-sm-3">-->
                <!--<div class="portfolio-box">-->
                    <!--<img src="img/product_3.jpg"/>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="col-sm-3">-->
                <!--<div class="portfolio-box">-->
                    <!--<img src="img/product_4.jpg"/>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</section>


<section id="server" class="server">
    <div class="container">
        <div class="row">
            <h1 class="title">Server Package</h1>
            <div class="col-sm-12">
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th center>类别</th>
                        <th align="center">免费版</th>
                        <th align="center">标准版</th>
                        <th align="center">专业版</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>授权网站数量</td>
                        <td>1个</td>
                        <td>1个</td>
                        <td>1个</td>
                    </tr>
                    <tr>
                        <td>商业授权许可</td>
                        <td style="color:#ff5500">×</td>
                        <td>√</td>
                        <td>√</td>
                    </tr>
                    <tr>
                        <td>安卓客户端</td>
                        <td style="color:#ff5500">×</td>
                        <td>H5 App</td>
                        <td>H5 App</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
<section class="contact">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-sm-offset-1 col-xs-12">
                <h1 class="title">Contact</h1>
                <form>
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input class="form-control" id="subject" name="subject" type="text" placeholder="Subject">
                    </div>
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input class="form-control" id="name" name="name" type="text" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input class="form-control" id="email" name="email" type="email" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <input class="form-control" id="phone" name="phone" type="text" placeholder="Phone">
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <input class="form-control" id="message" name="message" type="text" placeholder="Message">
                    </div>
                    <div class="text-center">
                        <input class="btn btn-success" type="submit" value="Submit">
                    </div>
                </form>
            </div>
            <div class="col-sm-4 col-sm-offset-1 col-xs-12">
                <div class="contact-box">
                    <div class="title-box"><a href="" class="title-btn">Google Map?</a></div>
                    <div class="address">
                        <p>Virtual Oasis Studio Cairns 209, 1812 Sir Lssac Brock Way ,SCatharines Ontasio L2R FR!</p>
                    </div>
                    <div class="phone">
                        <p>(289) 968 - 8582</p>
                        <p>Chris@virtvaloasis.ca</p>
                    </div>
                    <div class="motto">
                        <p>We proudly serve the Harwitan-Niagara-Buffaeo corrider.</p>
                    </div>
                    <a class="btn btn-default" href="http://virtualoasis.setmore.com" target="_blank">Book Now!</a>
                </div>
            </div>
        </div>
    </div>
</section>
<footer>
    <div class="container">
        <p style="margin:25px 0;color: gray">&copy; 幻城 VR 2016 版权所有</p>
    </div>
</footer>

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(function () {
        $(".navbar-nav li a").click(function () {
            $(".navbar-nav li").removeClass("active");
            $(this).parent("li").addClass("active");
        })
    })
</script>
</body>
</html>